<template>
  <div class="wrapper">
    <el-button class="button-seting" type="primary" size="medium" @click="addFormVisible">添加</el-button>
    <el-tabs type="border-card" @tab-click="handleClick" :value="activeName">
			<el-tab-pane label="banner" name="banner">
        <Banner ref="banner"></Banner>
      </el-tab-pane>
			<el-tab-pane label="栏目管理" name="column">
        <Colunm ref="column"></Colunm>
      </el-tab-pane>
			<el-tab-pane label="角色权限" name="role">
        <Role ref="role"></Role>
      </el-tab-pane>
			<el-tab-pane label="管理员" name="admin">
        <Admin ref="admin"></Admin>
      </el-tab-pane>
		</el-tabs>
  </div>
</template>

<script>
import Banner from "./banner/banner";
import Colunm from "./column/colunm";
import Role from "./role/role";
import Admin from "./admin/admin";
export default {
  components: { Admin, Role, Colunm, Banner},
  data(){
    return {
      activeName: "banner"
    };
	},
  methods:{
    //addFormVisible显隐
    addFormVisible(){
      switch (this.activeName) {
        case "banner":
          this.$refs.banner.$refs.bannerdialog.addFormVisible = true;
          break;
        case "column":
          this.$refs.column.$refs.columndialog.addFormVisible = true;
          break;
        case "role":
          this.$refs.role.$refs.roledialog.addFormVisible = true;
          break;
        case "admin":
          this.$refs.admin.$refs.admindialog.addFormVisible = true;
          break;
      }
    },
    //Tabs标签页
    handleClick(tab,event) {
      var name = event.target.getAttribute('id');
      switch (name) {
        case 'tab-banner':
          this.activeName = 'banner';
          this.$refs.banner.getBannerList();
          break;
        case 'tab-column':
          this.activeName = 'column';
          this.$refs.column.classifyList();
          break;
        case 'tab-role':
          this.activeName = 'role';
          this.$refs.role.getRoleList();
          break;
        case 'tab-admin':
          this.activeName = 'admin';
          this.$refs.admin.getAdminList();
          break;
      }
    },
  }
}
</script>
<style lang='scss' scoped>
  .button-seting{
    position: absolute;
    z-index: 999;
    right: 30px;
    top: 30px;
  }
</style>
<style>
  .el-tabs__item{
    height: 60px;
    width: 30%;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
  }
  .el-tabs{
    width: 100%;
  }
</style>
